<template>
  <div v-if="dialogVisible">
    <el-dialog title="设置动画" :visible.sync="dialogVisible" :close-on-click-modal="false" :width="s_width" append-to-body
      @close="colse()" v-if="dialogVisible" class="gyc-dialog">
      <div :style="`display: flex;flex-direction: column;justify-content: center;
      ${isOpenAnimation == 'open-ani'
          ? 'padding: 20px;min-height: 20px;'
          : 'padding:0px;min-height: 0px;'
        }         
          `">
        <div v-if="isOpenAnimation == 'open-ani'" style="position: relative">
          <span title="动画速度" style="
              position: absolute;
              right: -20px;
              top: -20px;
              transform: scale(0.5);
            ">{{ times }}s</span>
          <div>
            <div>
              <el-divider content-position="left">表格&nbsp;&nbsp;&nbsp;&nbsp;<i class="el-icon-s-grid"
                  title="表格"></i></el-divider>
            </div>
            <el-radio-group v-model="tableAnimateVal" @input="setAnimatePropety">
              <el-radio-button :label="topToBottom">从上而下</el-radio-button>
              <el-radio-button :label="bottomToTop">从下而上</el-radio-button>
              <el-radio-button :label="leftToRight">从左向右</el-radio-button>
              <el-radio-button :label="rightToleft">从右向左</el-radio-button>
              <el-radio-button :label="noneAnimation">无动画</el-radio-button>
            </el-radio-group>
          </div>
          <div>
            <div>
              <el-divider content-position="left">模态窗&nbsp;&nbsp;&nbsp;&nbsp;<i class="el-icon-s-comment"
                  title="模态窗"></i></el-divider>
            </div>
            <el-radio-group v-model="modelAnimationVal" @input="setModelAnimatePropety">
              <el-radio-button :label="scale">缩放</el-radio-button>
              <el-radio-button :label="rotate">旋转</el-radio-button>
              <el-radio-button :label="rotateAndScale">缩放和旋转</el-radio-button>
              <el-radio-button :label="topToBottom">从上而下</el-radio-button>
              <el-radio-button :label="bottomToTop">从下而上</el-radio-button>
              <el-radio-button :label="leftToRight">从左向右</el-radio-button>
              <el-radio-button :label="rightToleft">从右向左</el-radio-button>
              <el-radio-button :label="noneAnimation">无动画</el-radio-button>
            </el-radio-group>
          </div>
        </div>
      </div>
      <template #footer class="dialog-footer" style="display: flex; justify-content: center; width: 100%">
        <div style="display: flex; justify-content: space-between; width: 100%">
          <i class="el-icon-circle-plus-outline s-i" @click="setTime('+')" title="动画慢一点"
            v-if="isOpenAnimation == 'open-ani'"></i>
          <el-radio-group v-model="isOpenAnimation" @input="changeAnimation" style="
              display: flex;
              justify-content: center;
              align-items: center;
              flex: 1;
            ">
            <el-radio label="open-ani">开启动画</el-radio>
            <el-radio label="close-ani">关闭动画</el-radio>
          </el-radio-group>
          <i class="el-icon-remove-outline s-i" @click="setTime('-')" title="动画快一点"
            v-if="isOpenAnimation == 'open-ani'"></i>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      isOpenAnimation: "close-ani",
      topToBottom: { from: "translateY(-100%)", to: "translateY(0)" },
      bottomToTop: { from: "translateY(100%)", to: "translateY(0)" },
      leftToRight: { from: "translateX(-100%)", to: "translateX(0)" },
      rightToleft: { from: "translateX(100%)", to: "translateX(0)" },
      scale: { from: "scale(0)", to: "scale(1)" },
      rotate: { from: "rotate(0deg)", to: "rotate(360deg)" },
      rotateAndScale: {
        from: "scale(0) rotate(0deg)",
        to: "scale(0.5) rotate(360deg)",
      },
      noneAnimation: { from: "", to: "" },
      tableAnimateVal: {},
      modelAnimationVal: {},
      times: 0.2,
      s_width: "815px",
    };
  },
  methods: {
    setTime(n) {
      if (n == "+") {
        if (this.times >= 2) return;
        this.times = parseFloat(+this.times + +0.1).toFixed(1);
      } else {
        if (this.times <= 0.1) return;
        this.times = parseFloat(+this.times - +0.1).toFixed(1);
      }
      document.documentElement.style.setProperty("--time", this.times + "s");
      localStorage.setItem("ani-time", this.times);
    },
    colse() {
      this.dialogVisible = false;
    },
    changeAnimation(val) {
      this.isOpenAnimation = val;
      if (val === "close-ani") {
        localStorage.removeItem("s-ani");
        localStorage.removeItem("tb-ani");
        localStorage.removeItem("m-ani");
        this.setModelAnimatePropety({ from: "", to: "" });
        this.setAnimatePropety({ from: "", to: "" });
        this.s_width = "350px";
      } else {
        localStorage.setItem("s-ani", val);
        this.s_width = "815px";
      }
    },
    setAnimatePropety(val) {
      document.documentElement.style.setProperty("--from", val.from);
      document.documentElement.style.setProperty("--to", val.to);
      localStorage.setItem("tb-ani", JSON.stringify(val));
    },
    setModelAnimatePropety(val) {
      document.documentElement.style.setProperty("--models", val.from);
      document.documentElement.style.setProperty("--modele", val.to);
      localStorage.setItem("m-ani", JSON.stringify(val));
    },
  },
  mounted() {
    let sani = localStorage.getItem("s-ani");
    if (sani) {
      let tbani = localStorage.getItem("tb-ani");
      this.isOpenAnimation = sani;
      this.tableAnimateVal = tbani ? JSON.parse(tbani) : this.topToBottom;
      this.setAnimatePropety(this.tableAnimateVal);
      let mani = localStorage.getItem("m-ani");
      this.modelAnimationVal = mani ? JSON.parse(mani) : this.rotateAndScale;
      this.setModelAnimatePropety(this.modelAnimationVal);
      this.s_width = "815px";
    } else {
      this.setModelAnimatePropety({ from: "", to: "" });
      this.setAnimatePropety({ from: "", to: "" });
      this.s_width = "350px";
    }
    this.dialogVisible = this.$attrs.isshow;
    let atime = localStorage.getItem("ani-time");
    if (atime) {
      this.times = atime;
    }
  },
};
</script>

<style>
:root {
  --from: "";
  --to: "";
  --models: "";
  --modele: "";
  --time: 0.2s;
}

@keyframes model {
  from {
    transform: var(--models);
  }

  to {
    transform: var(--modele);
  }
}

@keyframes table {
  from {
    transform: var(--from);
  }

  to {
    transform: var(--to);
  }
}

.maincon {
  animation: table var(--time) ease;
}

.el-dialog__wrapper {
  animation: model var(--time) ease;
}

.s-i {
  cursor: pointer;
  font-size: 12px;
  transform: scale(0.8);
}
</style>